function initTypeItem(data, type_pid, parent, handleCategoryClick) {
  var el = ''
  var flag = ''
  for (var key in data) {
    if (data[key].id == type_pid) {
      flag = key
    }
    var temp =
      '<div class="category-item category-item1 ' +
      (data[key].id == type_pid ? 'top-category-active' : '') +
      '" id="' +
      data[key].id +
      '">' +
      '<div class="category-img"><img src="./image/icon/icon_' +
      data[key].id +
      (data[key].id == type_pid ? '_white' : '') +
      '.png" /></div>' +
      '<span>' +
      data[key].ind_name +
      '</span></div>' +
      (key < data.length - 1
        ? '<div class="category-item-divider" ></div>'
        : '')
    el += temp
  }
  parent.append(el)
  initSecondTypeItem(data[flag].second, handleCategoryClick, type_pid)
  $('.category-item1').click(function(e) {
    if ($(this).hasClass('top-category-active')) {
      $(this).removeClass('top-category-active')
      var src = $(this).find('img')[0].src
      $(this).find('img')[0].src = src.split('_white')[0] + '.png'
      $('.category-item2').remove()
      sessionStorage.removeItem('type_pid')
      sessionStorage.removeItem('type_ids')
      var firstItem =  $('.category-item1').eq(0)
    
      firstItem.addClass('top-category-active')
      var src = firstItem.find('img')[0].src
      firstItem.find('img')[0].src = src.split('.png')[0] + '_white.png'
      handleCategoryClick(e.currentTarget.id, 'cancel')
    } else {
      $('.category-item1').each(function(index, item) {
        if ($(item).hasClass('top-category-active')) {
          $(item).find('img')[0].src =
            $(item)
              .find('img')[0]
              .src.split('_white')[0] + '.png'
        }
      })
      $('.category-item1').removeClass('top-category-active')
      $(this).addClass('top-category-active')
      var src = $(this).find('img')[0].src
      $(this).find('img')[0].src = src.split('.png')[0] + '_white.png'
      $('.category-item2').remove()
      if (e.currentTarget.id != 0) {
        sessionStorage.setItem('type_pid', e.currentTarget.id)
      } else {
        sessionStorage.removeItem('type_pid')
      }
      sessionStorage.removeItem('type_ids')
      for (key in data) {
        if (data[key].id == e.currentTarget.id) {
          initSecondTypeItem(data[key].second, handleCategoryClick, type_pid)
        }
      }
      handleCategoryClick(e.currentTarget.id)
    }
  })
}
//生成子类
function initSecondTypeItem(data, handleCategoryClick) {
  var type_id = sessionStorage.getItem('type_ids')
  var el = ''
  for (key in data) {
    var temp =
      '<div class="category-item category-item2 ' +
      (data[key].id == type_id ? 'second-category-active' : '') +
      '" id="' +
      data[key].id +
      '">' +
      data[key].ind_name +
      '</div>'
    el += temp
  }
  $('#category-container2').append(el)
  $('.category-item2').click(function(e) {
    if ($(this).hasClass('second-category-active')) {
      $(this).removeClass('second-category-active')
      sessionStorage.removeItem('type_ids')
    } else {
      $('.category-item2').removeClass('second-category-active')
      $(this).addClass('second-category-active')
      sessionStorage.setItem('type_ids', e.currentTarget.id)
    }
    handleCategoryClick(e.currentTarget.id, 'second')
  })
}
